<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
		#div1{
			background-color: #FF0000;
			height: 200px;
			width: 200px;
		}
		#div2{
			height: 200px;
			width: 200px;
		}
		#div3{
			height: 200px;
			width: 200px;
		}
		#div21{
			background-color: aqua;
			height: 300px;
			width: 300px;
		}
		#div22{
			background-color: red;
			height: 300px;
			width: 300px;
		}
		#div23{
			background-color: blue;
			height: 300px;
			width: 300px;
		}
		#div41{
			background-color: blue;
			height: 300px;
			width: 300px;
		}
		</style>
	</head>
	<body>
		<b>1.按钮和DIV的单击事件（三种绑定方式）</b>
		<button type="button" id="bt1" onclick="bt()">按钮1</button>
		<button type="button" id="bt2">按钮2</button>
		<button type="button" id="bt3">按钮3</button>
		<div id="div1" onclick="dv()"></div>
		<div style="background-color: black;" id="div2" ></div>
		<div style="background-color: palegreen;" id="div3" ></div>
		<br>
		<b>2. 300px*300px的DIV 进入事件，离开事件，移动事件（三种绑定方式)</b>
		<div id="div21" onmouseenter="get()"></div>
			<p>------------------</p>
		<div id="div22"></div>
			<p>------------------</p>
		<div id="div23"></div>
		<b>3.登入页面</b><br>
		用户名:<input type="text" id="name" onfocus="console.log('用户在输入名称');" onblur='ae()' /><br>
		密码:<input type="password" id="pwd" onfocus="console.log('用户在输入密码');" onblur='pd()'/><br>
		<button type="button" id="bt31" >提交按钮</button><br>
		<b>实现DIV移动事件，采用监听器方式操作，可实现添加和清除监听器功能。</b><br />
		<button onclick="add()">添加监听器</button>&nbsp;<button onclick="remove()">清除监听器</button><br />
		<div id="div41"></div>
	</body>
	<script type="text/javascript">
	/*1.按钮和DIV的单击事件（三种绑定方式）*/
	function bt(){
		console.log('按钮,按下去了');
	}
	function dv(){
		console.log('div,被单击了');
	}
	document.getElementById('bt2').onclick=bt;
	document.getElementById('bt3').addEventListener('click',bt);
	 document.getElementById('div2').onclick=dv;
	 document.getElementById('div3').addEventListener('click',dv);
	/*2. 300px*300px的DIV 进入事件，离开事件，移动事件（三种绑定方式）*/
	function get(){console.log('进入了DIV');}
	function out(){console.log('离开了DIV事件');}
	document.getElementById('div22').onmouseleave=out;
	function move(){console.log('你在DIV事件里动来动去');}
	document.getElementById('div23').addEventListener('mousemove',move);
	/*3.登入页面
	用户名输入框，
	密码输入框，
	提交按钮*/
	
	//任务   3.1 用户名框获取焦点事件，控制台输出：用户在输入名称
	      //   3.2  用户名框失去焦点事件，判断是否有输入文字，没有则alert没有输入用户名
	function ae(){
		if(document.getElementById('name').value=='')
		{alert('没有输入用户名');}	
		}
	        //3.3  密码框获取焦点事件，控制台输出：用户在输入密码
	         //3.4  密码框失去焦点事件，判断是否有输入文字，没有则alert没有输入密码
		function pd(){
			if(document.getElementById('pwd').value=='')
			{alert('有输入密码');}	
			}
	      // 3.5 点击提交按钮，判断用户和密码是否为空。用户名为空，提示‘用户名为空’；
	            //密码为空，提示‘密码为空’；均为空，则提示‘用户名和密码为空’
		function adc(){
			if(document.getElementById('pwd').value==''&&document.getElementById('name').value=='')
			{alert('用户名和密码为空');}	
			 else if(document.getElementById('name').value=='')
			{alert('用户名为空');}	
		}
		document.getElementById('bt31').onclick=adc;
	/*4.实现DIV移动事件，采用监听器方式操作，可实现添加和清除监听器功能。*/
	function mover(){
		console.log('div里被你搅的一团糟')
	}
	function add(){
		document.getElementById('div41').addEventListener('mousemove',mover);
	}
	function remove(){
		document.getElementById('div41').removeEventListener('mousemove',mover);
	}
	</script>
</html>
